<template>
  <div class="cont-img-block" v-if="imgs.length" :style="{width:cuStyle.width + 'px'}">
    <!-- 只有一张 -->
    <div class="cont-img-1" v-if="imgs.length<2" :style="onlyOneStyle" style="height:100px">
      <img :src="imgs[0]" alt style="object-fit: cover;" />
    </div>
    <div v-else>
      <div class="cont-img-2">
        <div class="cont-img" v-for="(item, index) in imgs" :key="index" :style="styleObject">
          <img class="img" :src="item" alt style="object-fit: cover;" />
          <div
            class="cont-mark"
            v-if="maxLen==9&&index==8&&type=='more' || maxLen==6&&index==5&&type=='more'"
          >
            <div class="mark-block" :style="{padding:(cuStyle.singleHeight - 40) / 2 + 'px 0'}">
              <div class="mark-total">共{{ pics.length }}张</div>
              <div class="mark-more">查看全部</div>
            </div>
          </div>
        </div>

        <div class="cont-img" v-if="imgs.length % 3  == 2" :style="styleObject"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  /**
   * pics参数说明:
   *    []:展示的图片数组
   * cuStyle参数说明
   *    width: 图片展示最外层大盒子宽度
   *    singleWidth: 每个图片的宽度
   *    singleHeight: 每个图片的高度
   * maxLength参数说明:
   *    数值:表示允许显示的最大张数
   * type参数说明
   *    more: 表示显示更多(在第九张显示查看更多)
   */
  props: ["pics", "cuStyle", "maxLength", "type"],
  computed: {
    marginBottom() {
      return (this.cuStyle.width - this.cuStyle.singleWidth * 3) / 2;
    },
    imgs() {
      let imgs = [];
      this.pics.forEach((item, index) => {
        if (index < this.maxLen) {
          imgs.push(item);
        }
      });
      return imgs;
    },
    onlyOneStyle() {
      return { height: (this.cuStyle.width * 9) / 16 + "px" };
    },
    styleObject() {
      return [
        {
          width: this.cuStyle.singleWidth ? this.cuStyle.singleWidth + "px" : ""
        },
        {
          height: this.cuStyle.singleHeight
            ? this.cuStyle.singleHeight + "px"
            : ""
        },
        { "margin-bottom": this.marginBottom + "px" }
      ];
    }
  },
  data() {
    return {
      maxLen: this.maxLength ? this.maxLength : 9 // 最大允许显示图片张数
    };
  }
};
</script>

<style lang="less" scoped>
.cont-img-block {
  .cont-img-1 {
    width: 100%;
    height: 210px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .cont-img-2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: flex-start;
    .cont-img {
      width: 110px;
      height: 110px;
      margin-bottom: 10px;
      position: relative;
      .img {
        width: 100%;
        height: 100%;
      }
      .cont-mark {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        position: absolute;
        left: 0px;
        top: 0px;
        .mark-block {
          color: #f8f8f8;
          .mark-total {
            width: 100%;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 12px;
          }
          .mark-more {
            width: 100%;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>